<template>
    <div>

        <div v-transfer-dom>
            <loading :show="isLoading" text="加载中"></loading>
        </div>

        <!--内容区域-->
        <transition :name="viewTransition" :css="!!direction">
            <router-view></router-view>
        </transition>

    </div>
</template>

<script>
    import { ViewBox, Scroller, Loading, TransferDomDirective as TransferDom } from 'vux'
    import { mapState, mapActions } from 'vuex'

    export default {
        name: "index",
        directives: {
            TransferDom
        },
        components: {
            ViewBox,
            Scroller,
            Loading
        },
        computed: {
            ...mapState({
                isLoading: state => state.isLoading,
                direction: state => state.direction
            }),
            viewTransition () {
                if (!this.direction) return ''
                return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
            }
        },
    }
</script>

<style lang="scss">
    @import "../../styles/index.scss";
</style>
